<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 13:14:00
 -->
<template>
  <div class="app-container ">
    <div class=" clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <el-form
            class="fl form-no-bottom"
            :inline="true"
            :model="searchData"
            label-position="left"
            label-width="80px"
            @keydown.enter.native="btnSearch"
          >
            <el-form-item>
              <el-input
                v-model="searchData.keywords"
                clearable
                style="width: 360px"
                placeholder="按用户名,员工名,手机号查询"
              >
                <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch" />
              </el-input>
            </el-form-item>
          </el-form>
          <el-button class="fr" type="primary" @click="btnAddEmployee">新增员工</el-button>
        </div>
      </el-card>
    </div>
    <div>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.store"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.store"
        @edit-closed="onEditClosed"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { listData, delData, updateEmployee as updateData } from '@/api/bsd/employee.js'
import { oftenuse } from '@/libs/mixins'
import { getDelButton, getUpdateButton } from '@/components/Table/oper-btns.js'

export default {
  name: 'EmployeeList',
  filters: {
  },
  components: { },
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      employeeInfo: {
        oper: 'add',
        data: {}
      },
      optionsData: {},
      columnsData: [
        { title: '#', width: 30, type: 'expand',
          slots: {
            default: ({ row, seq }) => {
              const data = {
                props: {
                  data: row
                }
              }
              return [<span {...data}/>]
            }
          }
        },
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' },
                on: { click: () => { this.btnUpdateData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'username', title: '用户名', width: 100 },
        { field: 'realName', title: '员工名称', width: 100, editRender: { name: 'ElInput' }},
        { field: 'roleName', title: '角色', showOverflow: true, width: 150 },
        { field: 'sex', title: '性别', width: 80,
          slots: {
            default: (params) => {
              const { sex } = params.row
              if (sex === '0') return [<span>女</span>]
              if (sex === '1') return [<span>男</span>]
            }
          }
        },
        { field: 'phone', title: '手机号', width: 120, editRender: { name: 'ElInput' }},
        { field: 'email', title: '邮箱', width: 160, showOverflow: true, editRender: { name: 'ElInput' }},
        { field: 'status', title: '状态', width: 80,
          cellRender: {
            name: 'ElSwitch',
            props: { activeValue: '1', inactiveValue: '0' },
            events: {
              change: this.onSwitchStatusChange
            }
          }
        },
        { field: 'address', title: '地址', editRender: { name: 'ElInput' }, width: 200 }
      ]
    }
  },
  watch: {
  },
  created() {
    this.getListData()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.params.refresh) {
        vm.getListData()
      }
    })
  },
  methods: {
    btnAddEmployee() {
      this.$router.push({
        name: 'EmployeeAdd'
      })
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getListData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnUpdateData(row) {
      const { id } = row
      this.$router.push({
        name: 'EmployeeEdit',
        query: { id }
      })
    },
    btnDelData(row) {
      this.$confirm('确定要删除该员工吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData(row.id)
      }).catch(() => {
      })
    },
    // api
    delData(id) {
      delData(id).then(res => {
        if (res.data.flag) {
          this.$notify.success({ title: '删除成功！' })
          this.getListData()
        } else {
          this.$notify.error({ title: '删除失败！', message: res.data.message })
        }
      })
    },
    getListData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('store', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('store', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('store', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('store', false)
          reject(err)
        })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('store', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getListData()
    },
    onSwitchStatusChange(params, val) {
      const { row } = params
      updateData(row).then(res => {
        if (res.data.flag) {
          this.$set(row, 'status', val)
        }
      })
    },
    onEditClosed(params, val) {
      const { row } = params
      updateData(row).then(res => {
        if (!res.data.flag) {
          this.$notify.success({ title: '修改失败！', message: res.data.message })
          this.getListData()
        }
      })
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getListData()
    }
  }
}
</script>
<style scoped>

</style>
